<template>
  <div style="margin: 10px">
    <div style="margin-bottom: 10px">
      <el-row :gutter="1">
        <el-col :span="4"
          >用户名:
          <el-input v-model="queryUser.username" clearable style="width: 160px"
        /></el-col>
        <el-col :span="4"
          >电话号码:
          <el-input v-model="queryUser.phone" clearable style="width: 160px"
        /></el-col>
        <el-col :span="7"
          >创建时间:

          <el-date-picker
            v-model="queryUser.createTime"
            type="daterange"
            unlink-panels
            range-separator="To"
            start-placeholder="起始"
            end-placeholder="结束"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-col>
        <el-col :span="4"
          >备注:
          <el-input v-model="queryUser.remarks" clearable style="width: 160px"
        /></el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="queryUserPage">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <div>
        <el-button
          style="margin: 5px 0px"
          @click="createUserBtn(true, '新增用户')"
          size="small"
          >新增用户</el-button
        >
      </div>
      <el-table :data="tableData" border style="width: 100%; height: 500px">
        <el-table-column prop="id" label="ID" width="120" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column
          prop="uType"
          :formatter="uTypeFormatter"
          label="用户类型"
          width="120"
        />

        <el-table-column
          prop="status"
          :formatter="statusFormatter"
          label="状态"
          width="100"
        />
        <el-table-column prop="remarks" label="备注" width="200" />
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button
              link
              type="success"
              size="small"
              @click="changeUser(scope.row)"
              >审批</el-button
            >

            <el-button
              link
              type="primary"
              size="small"
              @click="changeUser(scope.row)"
              >修改</el-button
            >
            <el-button link type="info" size="small" @click="disable(scope.row)"
              >禁用</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange(currentPage)"
        />
      </div>
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      label-width="auto"
      style="max-width: 600px"
      draggable
      overflow
    >
      <h2 style="margin-top: -30px">{{ dialogTitle }}</h2>

      <el-form :model="form" label-width="auto" style="max-width: 400px">
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[{ required: true, message: '用户名必填' }]"
        >
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
          :rules="[{ required: true, message: '密码必填' }]"
        >
          <el-input
            v-model="form.password"
            type="password"
            show-password
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item
          label="角色"
          prop="uType"
          :rules="[{ required: true, message: '角色必填' }]"
        >
          <el-select v-model="form.uType" placeholder="选择角色">
             <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.id + '-' + item.name"
              :value="item.id"
            /> 
            <!-- <el-option label="1-管理员" value="1" />
            <el-option label="2-普通员工" value="2" /> -->
          </el-select>
        </el-form-item>

        <el-form-item label="电话号码">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="form.remarks" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveUser"> 提交 </el-button>

          <el-button @click="dialogFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import * as userApi from "@/api/userApi";

import * as roleApi from "@/api/roleApi";

const tableData = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const dialogFormVisible = ref(false);

const dialogTitle = ref();

const roleOptions = ref([]);

const roleMap = ref({});

const form = reactive({
  id: null,
  username: "",
  password: "",
  uType: "",
  phone: "",
  remarks: "",
  status: 1,
});

const queryUser = reactive({
  username: "",
  uType: "",
  phone: "",
  remarks: "",
  createTime: [],
  pageSize: pageSize.value,
  pageCurrent: currentPage.value,
});

function createUserBtn(show, title) {
  dialogFormVisible.value = show;
  form.username = null;
  form.password = "123456";
  form.phone = null;
  form.uType = null;
  form.remarks = null;
  form.id = null;
  dialogTitle.value = title;
}

function handleCurrentChange(currentPage) {
  queryUser.pageCurrent = currentPage;
  userApi.list(queryUser).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}

function queryUserPage() {
  userApi.list(queryUser).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}

function changeUser(data) {
  console.log(JSON.stringify(data));

  form.username = data.username;
  form.password = data.password;
  form.phone = data.phone;
  form.uType = data.uType;
  form.remarks = data.remarks;
  form.id = data.id;

  dialogFormVisible.value = true;
  dialogTitle.value = "修改用户";
}

function pass(data) {
  form.id = data.id;
  form.status = 1;
  saveUser();
  form.status = 0;
}

// 禁用状态格式化
function statusFormatter(row, column) {
  if (row.status === 1) {
    return "正常";
  } else if (row.status === 2) {
    return "禁用";
  } else if (row.status === 0) {
    return "待审核";
  }
}
function uTypeFormatter(row, column) {
  // if (row.uType === "1") {
  //   return "1-管理员";
  // } else if (row.uType === "2") {
  //   return "2-普通用户";
  // }
  var role = roleMap.value[row.uType];
  return role.id + "-" + role.name;
}

function saveUser() {
  if (form.id == null) {
    userApi.create(form).then((response) => {
      if (response.data.code == 200) {
        ElMessage("保存成功");
        dialogFormVisible.value = false;
        queryUserPage();
      }
    });
  } else {
    userApi.change(form).then((response) => {
      if (response.data.code == 200) {
        ElMessage("保存成功");
        dialogFormVisible.value = false;
        queryUserPage();
      } else {
        ElMessage(response.data.message);
      }
    });
  }
  createUserBtn(false);
}

function remove(data) {
  userApi.remove(data).then((response) => {
    if (response.data.code == 200) {
      ElMessage("删除成功");
      queryUserPage();
    }
  });
}

function disable(data) {
  userApi.disable(data).then((response) => {
    if (response.data.code == 200) {
      ElMessage("成功");
      queryUserPage();
    }
  });
}

function handleSizeChange() {}

onMounted(() => {
  roleApi.list({}).then((response) => {
    if (response.data.code == 200) {
        roleOptions.value = response.data.data;
        roleOptions.value.forEach((item) => {
        roleMap.value[item.id] = item;
      });
    }
  });
  queryUserPage();
});
</script>

<style>
</style>
